<script setup>

import {defineExpose, getCurrentInstance, onMounted, reactive, ref, toRaw, watch} from "vue";
import api from "@/request/apis.js";
import {nanoid} from "nanoid";
import {Button, Checkbox, Input, Option, Select, Tag} from "view-ui-plus";
import ParamDefine from "./ParamDefine.vue";

const props = defineProps(["leftData", "rightData"]);

const {proxy} = getCurrentInstance();
const left = ref();
const right = ref();
onMounted(async () => {

});


const mappingValueFunc = (row) => {
  const leftSelect = left.value.getSelectRow();
  const rightSelect = right.value.getSelectRow();
  // console.log(leftSelect)
  // console.log(rightSelect)

  if (!leftSelect) {
    proxy.$Message.info('请选择映射数据');
    return
  }
  if (!rightSelect) {
    proxy.$Message.info('请选择映射数据');
    return
  }
  if (row._key == leftSelect._key) {
    leftSelect.mappingPath = rightSelect.path;
    leftSelect.mappingJsonPath = rightSelect.jsonPath;
  }
  if (row._key == rightSelect._key) {
    rightSelect.mappingPath = leftSelect.path;
    rightSelect.mappingJsonPath = leftSelect.jsonPath;

  }

}
const rowSelect = (row) => {
  const leftSelect = left.value.getSelectRow();
  const rightSelect = right.value.getSelectRow();

  if (row._key == leftSelect?._key) {

    //renderRight
    right.value.mappingRowHiLight(row.mappingPath);

  }
  if (row._key == rightSelect?._key) {
    //renderRight
    left.value.mappingRowHiLight(row.mappingPath);

  }
}

const repairJson = (d) => {
  return left.value.repairJson(d);
}

defineExpose({
  repairJson
});

const autoMappingFunc = (data) => {

  const leftData = props.leftData;
  const rightData = props.rightData;

  if (leftData == data) {
    repeatSetMappingValue(leftData.params, rightData.params);
    return
  }
  if (rightData == data) {
    //循环右边的再从左边的找到设置mappingValue
    repeatSetMappingValue(rightData.params, leftData.params);
    return
  }
}
const repeatSetMappingValue = (target, source) => {
  const rootPath = "$";
  left.value.repeatCompPath(target, {}, rootPath, rootPath);
  left.value.repeatCompPath(source, {}, rootPath, rootPath);

  for (const t of target) {

    const p = t.path;

    const bs = findValueByPath(source, p);
    if (bs != null) {
      t.mappingPath = bs.path;
      t.mappingJsonPath = bs.jsonPath;
    }

    if (t.children) {
      repeatSetMappingValue(t.children, source);
    }


  }

}
const findValueByPath = (source, path) => {

  let result = null;

  for (const s of source) {
    if (s.path == path) {
      result = s;
      break
    }
    if (s.children) {
      const b = findValueByPath(s.children, path);
      if (b) {
        result = b;
        break;
      }
    }
  }
  return result;
}
</script>

<template>
  <el-row justify="start" style="margin-top: 10px">
    <el-col :span="12">
      <el-row justify="start" style="margin-top: 10px">
        <el-col :span="2">
          <el-tag class="ml-2" type="success">input</el-tag>
        </el-col>
      </el-row>
      <el-row justify="start" style="margin-top: 10px">
        <el-col :span="24">
          <ParamDefine :params="props.leftData" :isViewBasicFieldFlag="props.leftData?.isViewBasicFieldFlag"
                       :isViewArrayFlag="props.leftData?.isViewArrayFlag"
                       :isAddColumnFlag="props.leftData?.isAddColumnFlag"
                       :isUpdateColumnFlag="props.leftData?.isUpdateColumnFlag"
                       :isRemoveColumnFlag="props.leftData?.isRemoveColumnFlag"
                       :mappingValueFunc="mappingValueFunc"
                       :isActionColumnFlag="props.leftData?.isActionColumnFlag"
                       :rowSelect="rowSelect"
                       :jsonEditorFlag="props.leftData.jsonEditorFlag"
                       :isAddChildrenColumnFlag="props.leftData?.isAddChildrenColumnFlag"
                       :isMappingColumnFlag="props.leftData?.isMappingColumnFlag" ref="left"></ParamDefine>
        </el-col>
      </el-row>

    </el-col>
    <el-col :span="12">

      <el-row justify="start" style="margin-top: 10px">
        <el-col :span="2">
          <el-tag class="ml-2" type="success">output</el-tag>
        </el-col>
      </el-row>
      <el-row justify="start" style="margin-top: 10px">
        <el-col :span="24">
          <ParamDefine :params="props.rightData" :isViewBasicFieldFlag="props.rightData?.isViewBasicFieldFlag"
                       :isViewArrayFlag="props.rightData?.isViewArrayFlag"
                       :isAddColumnFlag="props.rightData?.isAddColumnFlag"
                       :isUpdateColumnFlag="props.rightData?.isUpdateColumnFlag"
                       :isRemoveColumnFlag="props.rightData?.isRemoveColumnFlag"
                       :mappingValueFunc="mappingValueFunc"
                       :isActionColumnFlag="props.rightData?.isActionColumnFlag"
                       :rowSelect="rowSelect"
                       :isViewAutoMappingFlag="props.rightData?.isViewAutoMappingFlag"
                       :jsonEditorFlag="props.rightData.jsonEditorFlag"
                       :autoMappingFunc="autoMappingFunc"
                       :isViewClearMappingFlag="props.rightData.isViewClearMappingFlag"
                       :isAddChildrenColumnFlag="props.rightData?.isAddChildrenColumnFlag"
                       :isMappingColumnFlag="props.rightData?.isMappingColumnFlag" ref="right"></ParamDefine>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<style scoped>

</style>